<template>
    <div class="main">
        <router-view v-slot="{ Component }">
            <Suspense>
                <component :is="Component" />
            </Suspense>
        </router-view>
    </div>
</template>

<script>
export default {
    name: 'Layout',
    data() {
        return {

        }
    },
    methods: {
    },
    created() {
        this.path = this.$route.path;
    }
}
</script>
<style lang='scss'>
    .head {
        position: sticky;
        top: 0;
        line-height: 40px;
        text-align: left;
        background-color: #fff;
        z-index: 10;
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 10%);
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
	.main {
		text-align: left;
        padding-right: 250px;
	}
    .menu {
		position: fixed;
		top: 40px;
		right: 0;
		width: 250px;
		height: 100vh;
        background-color: #fff;
        border-left: 1px solid #e6e6e6;
        text-align: left;
        .li {
            span {
                display: inline-block;
                line-height: 30px;
                padding: 0 20px;
                cursor: pointer;
                width: 100%;
                &:hover {
                    color: #4cffdd;
                }
            }
            .selected {
                background-color: #d0ffea;
                &:before {
                    position: absolute;
                    content: ' ';
                    left: 0;
                    height: 30px;
                    width: 5px;
                    background-color: #4cffdd;
                }
                &:hover {
                    color: #2c3e50;
                }
            }
        }
	}
</style>
